<template>
  <div class="admin">
    <div class="doMessage">
      <div class="search">
        <input type="text" placeholder="请输入关键字" v-model="name" />
        <button @click="search">搜索</button>
      </div>
      <div class="add">
        <!-- <button>添加</button> -->
        <!-- <el-button type="text" @click="open">添加</el-button> -->
        <el-button type="text" @click="dialogFormVisible = true"
          >添加</el-button
        >

        <el-dialog title="添加轮廓图" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="商品id" :label-width="formLabelWidth">
              <el-input v-model="form.goods_id" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="图片路径" :label-width="formLabelWidth">
              <el-input v-model="form.image_src" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="导航地址" :label-width="formLabelWidth">
              <el-input v-model="form.navigator_url" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="打开方式" :label-width="formLabelWidth">
              <el-input v-model="form.open_type" autocomplete="off"></el-input>
            </el-form-item>
            <!-- <el-form-item label="活动区域" :label-width="formLabelWidth">
              <el-select v-model="form.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item> -->
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="add">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
    <!-- 表格 -->
    <el-table :data="newData" style="width: 100%">
      <el-table-column label="编号" prop="_id"> </el-table-column>
        <el-table-column label="商品id" prop="goods_id">
          <!-- <img :src="scope.row.image_src" alt=""> -->
        </el-table-column>
      

      <el-table-column label="图片" prop="realname">
        <template slot-scope="scope">
          <img :src="scope.row.image_src" alt="" width="200px" height="200px">
        </template>
         </el-table-column>
      <el-table-column label="导航地址" prop="navigator_url"> </el-table-column>
      <el-table-column label="打开方式" prop="open_type"> </el-table-column>
      <el-table-column align="center">
        <template slot="header" slot-scope="scope">
          <!-- <el-input
          v-model="search"
          size="mini"
          placeholder="输入关键字搜索"/> -->
          操作
        </template>
        <template slot-scope="scope">
          <!-- <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">Edit</el-button> -->
          <el-button size="mini" type="primary" @click="update(scope.row)"
          >修改</el-button
        >

        <el-dialog title="修改轮廓图" :visible.sync="dialogFormVisible1">
          <el-form :model="form1">
            <el-form-item label="轮廓图id" :label-width="formLabelWidth">
              <el-input v-model="form1._id" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品id" :label-width="formLabelWidth">
              <el-input v-model="form1.goods_id" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="图片路径" :label-width="formLabelWidth">
              <el-input v-model="form1.image_src" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="导航地址" :label-width="formLabelWidth">
              <el-input v-model="form1.navigator_url" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="打开方式" :label-width="formLabelWidth">
              <el-input v-model="form1.open_type" autocomplete="off"></el-input>
            </el-form-item>
            <!-- <el-form-item label="活动区域" :label-width="formLabelWidth">
              <el-select v-model="form.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item> -->
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible1 = false">取 消</el-button>
            <el-button type="primary" @click="add1">确 定</el-button>
          </div>
        </el-dialog>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)"
            >Delete</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      name: "",
      searchData: [],
      name1:'',
      dialogFormVisible: false,
      dialogFormVisible1:false,
      form: {
        goods_id: "",
        image_src: "",
        navigator_url: "",
        open_type: "",
      },
      form1: {
        _id:'',
        goods_id: "",
        image_src: "",
        navigator_url: "",
        open_type: "",
      },
      formLabelWidth: "120px",
    };
  },
  methods: {
    // handleEdit(index, row) {
    //   console.log(index, row);
    // },
    async handleDelete(row) {
      let obj = {
        _id: row._id,
      };
      await this.$http.contourMap.deleteSwiper(obj);
      this.getAdminApi();
    },

    async getAdminApi() {
      let { data: res } = await this.$http.contourMap.getAllSwiper();
      
      this.tableData = res.message;
    },
    search() {
        this.name1=this.name
        let newData = this.tableData.filter((item) =>item.goods_id==this.name);
        this.searchData=newData
    },
    async add() {
      let { data: res } = await this.$http.contourMap.addSwiper(this.form);
      this.dialogFormVisible = false;
      this.getAdminApi();
    },
    async add1() {
      let { data: res } = await this.$http.contourMap.updateSwiper(this.form1);
      this.dialogFormVisible1 = false;
      this.getAdminApi();
    },
    update(val){
      
      this.form1={
        _id:val._id,
        goods_id:val.goods_id,
        image_src: val.image_src,
        navigator_url: val.navigator_url,
        open_type: val.open_type,
      }
      this.dialogFormVisible1=true
    }
  },
  created() {
    this.getAdminApi();
  },
  computed: {
    newData() {
      if (this.searchData.length == 0 && this.name1=='') {
        return this.tableData;
      } else if(this.searchData==0 && this.name1){
        return this.searchData;
      } else{
        return this.searchData;
      }
    },
  },
};
</script>

<style lang='scss' scoped>
.admin {
  padding: 20px 20px 0 20px;
  box-sizing: border-box;
}
.doMessage {
  display: flex;

  .search {
    width: 300px;
    height: 40px;
    display: flex;
    margin-right: 50px;
    input {
      flex-grow: 1;
    }
    button {
      width: 50px;
      border: none;
      outline: none;
      background-color: blue;
      color: white;
    }
  }
  .add {
    width: 80px;
    height: 40px;
    & > button {
      width: 100%;
      height: 100%;
      border: none;
      outline: none;
      background-color: blue;
      color: white;
    }
  }
}
</style>